<template>
  <div class="app flex grow">
    <div class="left flex column">
      <yn-home-notice ref="notice" />
      <yn-home-review ref="review" />
    </div>
    <div class="center grow flex column">
      <div class="wrap flex grow column">
        <yn-home-skill ref="skill" />
        <!-- <yn-home-stock /> -->
      </div>
    </div>
    <div class="right grow flex column">
      <yn-home-question ref="question" />
    </div>
  </div>
</template>
<script>
import { getUrlParams } from "../../script/utils";
import notice from "./notice";
import review from "./review";
import skill from "./skill";
import question from "./question";
let { version } = getUrlParams();
export default {
  data() {
    return {
      counter: 1,
    };
  },
  components: {
    "yn-home-notice": notice,
    "yn-home-review": review,
    "yn-home-skill": skill,
    "yn-home-question": question,
  },
  watch: {
    counter(num) {
      const oneMinute = 60 * 60;
      const tenMinute = oneMinute * 10;
      if (num % oneMinute === 0) {
        this.oneMinuteRreresh();
      }
      if (num % tenMinute === 0) {
        this.tenMunniteRefresh();
      }
    },
  },
  mounted() {
    this.animationFrameCall();
    document.addEventListener("visibilitychange", () => {
      if (!document.hidden) {
        this.counter = 0;
        this.oneMinuteRreresh();
        this.tenMunniteRefresh();
      }
      this.animationFrameCall();
    });
  },
  methods: {
    animationFrameCall() {
      window.requestAnimationFrame(() => {
        this.counter++;
        this.animationFrameCall();
      });
    },
    oneMinuteRreresh() {
      if (version >= 1) {
        return this.$refs.notice.chargeMarketLiveList();
      }
      this.$refs.notice.freeMarketLiveList();
    },
    tenMunniteRefresh() {
      if (version >= 1) {
        this.$refs.review.chargeRecordLivelist();
      }
      if (!version) {
        this.$refs.review.freeRecordLivelist();
      }
      this.$refs.skill.getSkills();
      this.$refs.question.getQuestion();
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  overflow: hidden;
}
.left {
  background: #090910;
  width: 33.33%;
}
.center {
  width: 33.33%;
  background: #090910;
  .wrap {
    margin: 0 15px;
  }
}
.right {
  width: 33.33%;
  background: #090910;
}
</style>
